<template>
  <div class="list">
   
    <div class="people">
        <div class="people_title">考勤信息</div>
    </div>

    <div class="flexBetween" style="margin-bottom:10px">
        <div style="color:#333;font-size:18px">月度考勤信息</div>
        <div class="flexBetween">
          <div style="margin-right:30px">
            <a-radio-group
              v-model="radioGroup"
              :style="{ marginBottom: '8px' }"
            >
              <a-radio-button value="1">
                本月
              </a-radio-button>
              <a-radio-button value="2">
                上一月
              </a-radio-button>
            </a-radio-group>
          </div>
          <div>
            <a-input-search
              placeholder="请选择月份"
              style="width: 200px"
              @search="onSearch"
            />
            <br />
          </div>
        </div>
        
      </div>
    <div>
          <a-table :columns="columns" :data-source="data" @change="onChange"  
          >
          <div class="td_name" slot="classGrop" slot-scope="text" @click="people_info">{{ text }}</div>
          <div class="td_name" slot="personCharge" slot-scope="text" @click="isShow">{{ text }}</div>
          <div slot="star1">
                <!-- <a-icon type="star" style="font-size:18px"/> -->
                <img :src="kaoqin1" alt="">
          </div>
          <div slot="star2">
                <img :src="kaoqin2" alt="">
          </div>
          <div slot="star3">
               <img :src="kaoqin2" alt="">
          </div>
          <div slot="star4">
               <img :src="kaoqin2" alt="">
          </div>
          <div slot="star5">
                <img :src="kaoqin2" alt="">
          </div>
          <div slot="star6">
               <img :src="kaoqin1" alt="">
          </div>
          <div slot="star7">
              <img :src="kaoqin1" alt="">
          </div>
          <div slot="star8">
               <img :src="kaoqin2" alt="">
          </div>
          <div slot="star9">
              <img :src="kaoqin2" alt="">
          </div>
          </a-table>
        </div>
        <div>
      <a-modal v-model="visible" @ok="handleOk" :bodyStyle="{border: '1px solid #EAEAEA'}" :closable="true" :footer="null" :centered="true"  :maskClosable="false">
        <div style="border-left: 1px solid #EAEAEA;border-bottom: 1px solid #EAEAEA;">
          <div class="flexBetween">
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
          </div>
          <div v-for="(item,index) in dateTimeList" :key="index" class="flexBetween">
            <p class="tableInBox">{{item.a}}</p>
            <p class="tableInBox2">{{item.aa}}</p>
            <p class="tableInBox">{{item.b}}</p>
            <p class="tableInBox2">{{item.bb}}</p>
            <p class="tableInBox">{{item.c}}</p>
            <p class="tableInBox2">{{item.cc}}</p>
            <p class="tableInBox">{{item.d}}</p>
            <p class="tableInBox2">{{item.dd}}</p>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import kaoqin1 from '../../../assets/homeImg/kaoqin11.png'
import kaoqin2 from '@/assets/homeImg/kaoqin2.png'
export default {
  data() {
    return {
      kaoqin1,
      kaoqin2,
      radioGroup: "1",
       columns: [
        {
          title: "月份",
          dataIndex: "name",
          align:"center"
        },
        {
          title: "姓名",
          dataIndex: "classGrop",
          align:"center",
          key: "classGrop",
          scopedSlots: { customRender: "classGrop" },
        },
        {
          title: "岗位",
          dataIndex: "peopleNum",
          align:"center"
        },
        {
          title: "出勤天数",
          dataIndex: "personCharge",
          align:"center",
          key: "personCharge",
          scopedSlots: { customRender: "personCharge" },
        },
        {
          title: "1",
          dataIndex: "1",
          align:"center",
          key: "star1",
          scopedSlots: { customRender: "star1" },
        },
        {
          title: "2",
          dataIndex: "2",
          align:"center",
          key: "star2",
          scopedSlots: { customRender: "star2" },
        },
        {
          title: "3",
          dataIndex: "3",
          align:"center",
          key: "star3",
          scopedSlots: { customRender: "star3" },
        },
        {
          title: "4",
          dataIndex: "4",
          align:"center",
          key: "star4",
          scopedSlots: { customRender: "star4" },
        },
        {
          title: "5",
          dataIndex: "5",
          align:"center",
          key: "star5",
          scopedSlots: { customRender: "star5" },
        },
        {
          title: "6",
          dataIndex: "6",
          align:"center",
          key: "star6",
          scopedSlots: { customRender: "star6" },
        },
        {
          title: "7",
          dataIndex: "7",
          align:"center",
          key: "star7",
          scopedSlots: { customRender: "star7" },
        },
        {
          title: "8",
          dataIndex: "8",
          align:"center",
          key: "star8",
          scopedSlots: { customRender: "star8" },
        },
        {
          title: "9",
          dataIndex: "9",
          align:"center",
          key: "star9",
          scopedSlots: { customRender: "star9" },
        }
      ],
      data: [
        {
          key: "1",
          name: "2020年3月",
          classGrop: "王志",
          peopleNum: '普工',
          personCharge: "23",
          '1': "7500",
          '2': "2020-02-12",
          '3': "",
        },
        {
          key: "2",
         name: "2020年3月",
          classGrop: "潘海涛",
          peopleNum: '普工',
          personCharge: "23",
          '1': "7500",
          '2': "2020-02-12",
          '3': "",
        },
        {
          key: "3",
         name: "2020年3月",
          classGrop: "王权",
          peopleNum: '普工',
          personCharge: "23",
          '1': "7500",
          '2': "2020-02-12",
          '3': "",
        },
        {
          key: "4",
         name: "2020年3月",
          classGrop: "李海",
          peopleNum: '普工',
          personCharge: "23",
          '1': "7500",
          '2': "2020-02-12",
          '3': "",
        },
        {
          key: "5",
         name: "2020年3月",
          classGrop: "李志同",
          peopleNum: '普工',
          personCharge: "23",
          '1': "7500",
          '2': "2020-02-12",
          '3': "",
        },
        {
          key: "6",
         name: "2020年3月",
          classGrop: "张全义",
          peopleNum: '普工',
          personCharge: "23",
          '1': "7500",
          '2': "2020-02-12",
          '3': "",
        },
      ],
      visible: false,
      dateTimeList: [
        {
          a: '1',
          aa: '07:23:19',
          b: '9',
          bb: '07:23:19',
          c: '17',
          cc: '07:23:19',
          d: '25',
          dd: '07:23:19'
        },
        {
          a: '2',
          aa: '07:23:19',
          b: '10',
          bb: '07:23:19',
          c: '18',
          cc: '07:23:19',
          d: '26',
          dd: '07:23:19'
        },
        {
          a: '3',
          aa: '07:23:19',
          b: '11',
          bb: '07:23:19',
          c: '19',
          cc: '07:23:19',
          d: '27',
          dd: '07:23:19'
        },
        {
          a: '4',
          aa: '07:23:19',
          b: '12',
          bb: '07:23:19',
          c: '20',
          cc: '07:23:19',
          d: '28',
          dd: '07:23:19'
        },
        {
          a: '5',
          aa: '07:23:19',
          b: '13',
          bb: '07:23:19',
          c: '21',
          cc: '07:23:19',
          d: '29',
          dd: '07:23:19'
        },
        {
          a: '6',
          aa: '07:23:19',
          b: '14',
          bb: '07:23:19',
          c: '22',
          cc: '07:23:19',
          d: '30',
          dd: '07:23:19'
        },
        {
          a: '7',
          aa: '07:23:19',
          b: '15',
          bb: '07:23:19',
          c: '23',
          cc: '07:23:19',
          d: '31',
          dd: '07:23:19'
        },
        {
          a: '8',
          aa: '07:23:19',
          b: '16',
          bb: '07:23:19',
          c: '24',
          cc: '07:23:19',
          d: '',
          dd: ''
        }
      ]
    };
  },
  methods:{
      onSearch() {},
    onChange(pagination, filters, sorter) {
      console.log("params", pagination, filters, sorter);
    },
    people_info(){
        this.$router.push({path:'/personnelInformation'})
    },
    isShow(){
this.visible = true;
    },
     handleOk(e) {
      //   console.log(e);
      this.visible = false;
    }
  }
};
</script>

<style scoped>
    /* ::v-deep .ant-table-pagination.ant-pagination{
   display: none; } */
   .part1_div {
  width: 375px;
  height: 50px;
  border-right: 1px solid #ccc;
  text-align: center;
}
.part1_div :nth-child(1) {
  color: #ccc;
  font-size: 14px;
}
.part1_div :nth-child(2) {
  color: #333;
  font-size: 23px;
}
.title{
    color:#1890ff ;
    font-size: 16px;
    margin-bottom: 10px;
}
.td_name{
    color: #1890ff;
    cursor: pointer;
}
.people{
    height: 45px;
    /* border-bottom: 1px solid #ccc; */
    margin-bottom: 30px;
}
.people_title{
    width: 90px;
    height: 45px;
    font-size: 16px;
    line-height: 45px;
    color: #1890ff;
    border-bottom:2px solid #1890ff;
    text-align: center;
    margin-left: 30px;
}
  .tableInBox{
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0;
    border: 1px solid #EAEAEA;
    border-left: none;
    border-bottom: none;
    background-color: #F6F8F9;
  }
  .tableInBox2{
    width: 160px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0;
    border: 1px solid #EAEAEA;
    border-left: none;
    border-bottom: none;
  }
  ::v-deep .ant-modal{
    width: 1040px !important;
  }
  ::v-deep .ant-modal-body{
    padding: 20px;
    padding-top: 50px;
  }
   .date{
    width: 100px;
    height: 50px;
    border: 1px solid #EAEAEA;
    border-left: none;
    border-bottom: none;
    margin: 0;
    text-align: center;
    line-height: 50px;
    background-color: #F6F8F9;
  }
  .time{
    width: 160px;
    height: 50px;
    border: 1px solid #EAEAEA;
    border-left: none;
    border-bottom: none;
    margin: 0;
    text-align: center;
    line-height: 50px;
    background-color: #F6F8F9;
  }
</style>
